import { createLoading } from "/@/components/Loading"
import type { Directive, App } from "vue"

const loadingDirective: Directive = {
  mounted(el, binding) {
    const tip = el.getAttribute("loading-tip")
    const background = el.getAttribute("loading-background")
    const size = el.getAttribute("loading-size")
    const fullscreen = !!binding.modifiers.fullscreen
    const instance = createLoading(
      {
        tip,
        background,
        size: size || "large",
        loading: !!binding.value,
        absolute: !fullscreen,
      },
      fullscreen ? document.body : el
    )
    el.instance = instance
  },
  updated(el, binding) {
    const instance = el.instance
    if (!instance) return
    instance.setTip(el.getAttribute("loading-tip"))
    if (binding.oldValue !== binding.value) {
      if (binding.oldValue !== binding.value) {
        instance.setLoading?.(binding.value && !instance.loading)
      }
    }
  },
  unmounted(el) {
    el?.instance?.close()
  },
}

export function setupLoadingDirective(app: App) {
  app.directive("loading", loadingDirective)
}

export default loadingDirective
